<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./static/js/jquery.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <script src="./static/js/x6.js"></script>
    <script src="./static/js/x6-node.js"></script>
	
    <link href="./static/css/bootstrap.min.css" rel="stylesheet" />

    <style type="text/css">
        .header{
            height: 10%;
            width: 100%;
        }

        .left{
            width: 10%;
        }

        .center{
            width: 90%;
        }
    </style>
</head>
<body>
    <div class="header">
        <button onclick="getJson()">点击</button>
    </div>
    <div style="display: flex;flex-flow: row;">
        <div class="left">

        </div>
        <div class="center">
            <div id="container"></div>
        </div>
    </div>
    
    
    <script>
        

        //下面是锚点的代码。 知道就行了 我就不一一写了。
        const ports = {
            groups: {
            // 输入链接桩群组定义
            top: {
                position: 'top',
                attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
                },
            },
            // 输出链接桩群组定义
            bottom: {
                position: 'bottom',
                attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
                },
            },
            left: {
                position: 'left',
                attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
                },
            },
            right: {
                position: 'right',
                attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#2D8CF0',
                    strokeWidth: 2,
                    fill: '#fff',
                },
                },
            },
            },
            items: [
            {
                id: 'port1',
                group: 'top',
            },
            {
                id: 'port2',
                group: 'bottom',
            },
            {
                id: 'port3',
                group: 'left',
            },
            {
                id: 'port4',
                group: 'right',
            }
            ],
        }

        const data = {
            // 节点
            nodes: [
                {
                    id: 'node1', // String，可选，节点的唯一标识
                    shape: 'rect', // 使用 rect 渲染
                    x: 40,       // Number，必选，节点位置的 x 值
                    y: 40,       // Number，必选，节点位置的 y 值
                    width: 80,   // Number，可选，节点大小的 width 值
                    height: 40,  // Number，可选，节点大小的 height 值
                    label: 'hello', // String，节点标签
                    ports:ports
                },
                {
                    id: 'node2', // String，节点的唯一标识
                    shape: 'circle', // 使用 ellipse 渲染
                    x: 160,      // Number，必选，节点位置的 x 值
                    y: 180,      // Number，必选，节点位置的 y 值
                    width: 80,   // Number，可选，节点大小的 width 值
                    height: 40,  // Number，可选，节点大小的 height 值
                    label: 'world', // String，节点标签
                    ports:ports
                },
            ],
            // 边
            edges: [
                {
                    source: 'node1', // String，必须，起始节点 id
                    target: 'node2', // String，必须，目标节点 id
                },
            ],
        };
        const graph = new X6.Graph({
          container: document.getElementById('container'),
          //启用网格
          grid: {
            size: 10,      // 网格大小 10px
            visible: true, // 绘制网格，默认绘制 dot 类型网格
            type: 'dot', // 'dot' | 'fixedDot' | 'mesh'
            args: { 
            color: '#a0a0a0', // 网格线/点颜色
            thickness: 1,     // 网格线宽度/网格点大小
            },
          },
          //可编辑大小
          resizing: {
            enabled: true,
          },
          //启用历史
          history: {
            enabled: true,
          },
          mousewheel:{
            enabled: true,
          },
          connecting: {
            snap: true,
          },
          //启用编辑
          panning: {
            enabled: true,
            modifiers: 'shift',
            eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel'],
          },
          connecting: {
            allowBlank: true,
          },
          width: 800,
          height: 600,

        });

        graph.fromJSON(data)


        graph.on('node:delete', ({ view, e }) => {
            e.stopPropagation()
            view.cell.remove()
        })

        graph.on('node:customevent', ({ name, view, e }) => {
            if (name === 'node:delete') {
                e.stopPropagation()
                view.cell.remove()
            }
        })

        const target = graph.addNode({
            x: 120,
            y: 160,
            width: 80,
            height: 30,
            label: 'Target',
            connector: 'rounded',
        })

        
        graph.on('node:mouseenter', ({ node }) => {
            //if (node === target) {
                node.addTools({
                    name: 'button-remove',
                    args: {
                        x: 0,
                        y: 0,
                        offset: { x: 10, y: 10 },
                    }
                })
            //}
        })

        graph.on('node:mouseleave', ({ node }) => {
            //if (node === target) {
                node.removeTools()
            //}
        })

        function getJson()
        {
            var json = graph.toJSON();
            console.log(json);
        }

      </script>
</body>
</html>